<!--
  ~ Copyright (c) 2024 Huawei Device Co., Ltd.
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
  />
  <title>活动详情 - H5页面B</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      /* 设置根字体大小，针对高分辨率设备调整 */
      font-size: 16px;
      font-size: max(16px, min(4vw, 24px));
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 1.25rem; /* 20px -> 1.25rem */
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      line-height: 1.6;
      font-size: 1rem;
    }

    .container {
      width: 100%;
      background: white;
      border-radius: 1rem; /* 16px -> 1rem */
      padding: 1.5rem; /* 24px -> 1.5rem */
      box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.2);
      min-height: calc(100vh - 2.5rem); /* 40px -> 2.5rem */
    }

    h1 {
      color: #333;
      text-align: center;
      margin-bottom: 1.25rem; /* 20px -> 1.25rem */
      font-size: 1.75rem; /* 26px -> 1.75rem */
      background: linear-gradient(135deg, #ff6b35, #f7931e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .page-info {
      background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
      padding: 1.125rem; /* 18px -> 1.125rem */
      border-radius: 0.75rem; /* 12px -> 0.75rem */
      margin: 1.25rem 0; /* 20px -> 1.25rem */
      border-left: 0.3125rem solid #ff6b35; /* 5px -> 0.3125rem */
    }

    .page-info h3 {
      color: #d63031;
      margin-bottom: 0.625rem; /* 10px -> 0.625rem */
      font-size: 1.125rem; /* 18px -> 1.125rem */
    }

    .page-info p {
      color: #2d3436;
      font-size: 1.125rem; /* 16px -> 0.875rem */
      margin: 0.375rem 0; /* 6px -> 0.375rem */
    }

    .params-info {
      background: #f8f9fa;
      padding: 0.9375rem; /* 15px -> 0.9375rem */
      border-radius: 0.5rem; /* 8px -> 0.5rem */
      margin: 0.9375rem 0; /* 15px -> 0.9375rem */
      font-family: "Courier New", monospace;
      font-size: 0.8rem; /* 12px -> 0.8rem */
      border: 0.125rem solid #e9ecef; /* 2px -> 0.125rem */
      max-height: 7.5rem; /* 120px -> 7.5rem */
      overflow-y: auto;
      line-height: 1.4;
    }

    .activity-content {
      background: linear-gradient(135deg, #a8edea, #fed6e3);
      padding: 1.25rem; /* 20px -> 1.25rem */
      border-radius: 0.75rem; /* 12px -> 0.75rem */
      margin: 1.25rem 0; /* 20px -> 1.25rem */
      text-align: center;
    }

    .activity-title {
      font-size: 1.25rem; /* 20px -> 1.25rem */
      font-weight: bold;
      color: #2d3436;
      margin-bottom: 0.625rem; /* 10px -> 0.625rem */
    }

    .activity-desc {
      color: #636e72;
      margin-bottom: 0.9375rem; /* 15px -> 0.9375rem */
      font-size: 1rem;
    }

    .activity-price {
      font-size: 1.75rem; /* 28px -> 1.75rem */
      font-weight: bold;
      color: #e17055;
      margin: 0.625rem 0; /* 10px -> 0.625rem */
    }

    .activity-tag {
      display: inline-block;
      background: #ff7675;
      color: white;
      padding: 0.25rem 0.75rem; /* 4px 12px -> 0.25rem 0.75rem */
      border-radius: 1.25rem; /* 20px -> 1.25rem */
      font-size: 1rem; /* 16px -> 0.8rem */
      margin: 0.3125rem; /* 5px -> 0.3125rem */
    }

    .button-group {
      margin: 1.5625rem 0; /* 25px -> 1.5625rem */
    }

    .button {
      display: block;
      width: 100%;
      background: linear-gradient(135deg, #ff6b35, #f7931e);
      color: white;
      padding: 1.2rem 1.5rem; /* 16px 24px -> 1.2rem 1.5rem */
      border: none;
      border-radius: 0.75rem; /* 12px -> 0.75rem */
      margin: 0.75rem 0; /* 12px -> 0.75rem */
      font-size: 1.5rem; /* 16px -> 1.1rem */
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      text-align: center;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      min-height: 3.5rem; /* 确保按钮有足够的点击区域 */
    }

    .button::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.5s;
    }

    .button:hover::before {
      left: 100%;
    }

    .button:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
    }

    .button:active {
      transform: translateY(-1px);
    }

    .button.success {
      background: linear-gradient(135deg, #00b894, #00a085);
    }

    .button.success:hover {
      box-shadow: 0 8px 25px rgba(0, 184, 148, 0.4);
    }

    .button.outline {
      background: transparent;
      color: #ff6b35;
      border: 2px solid #ff6b35;
    }

    .button.outline:hover {
      background: #ff6b35;
      color: white;
    }

    .stats {
      display: flex;
      justify-content: space-around;
      margin: 1.25rem 0; /* 20px -> 1.25rem */
      background: #f8f9fa;
      padding: 0.9375rem; /* 15px -> 0.9375rem */
      border-radius: 0.75rem; /* 12px -> 0.75rem */
    }

    .stat-item {
      text-align: center;
    }

    .stat-number {
      font-size: 2rem; /* 24px -> 1.5rem */
      font-weight: bold;
      color: #ff6b35;
    }

    .stat-label {
      font-size: 1.5rem; /* 12px -> 0.8rem */
      color: #636e72;
      margin-top: 0.3125rem; /* 5px -> 0.3125rem */
    }

    .log {
      background: #2d3436;
      color: #ddd;
      padding: 0.75rem; /* 12px -> 0.75rem */
      border-radius: 0.5rem; /* 8px -> 0.5rem */
      margin: 0.9375rem 0; /* 15px -> 0.9375rem */
      max-height: 11.25rem; /* 180px -> 11.25rem */
      overflow-y: auto;
      font-size: 0.8rem; /* 12px -> 0.8rem */
      font-family: "Courier New", monospace;
      border: 0.0625rem solid #636e72; /* 1px -> 0.0625rem */
      line-height: 1.4;
    }

    .log-entry {
      margin: 0.1875rem 0; /* 3px -> 0.1875rem */
      padding: 0.125rem 0; /* 2px -> 0.125rem */
    }

    .log-time {
      color: #74b9ff;
    }

    .log-message {
      color: #ddd;
    }

    .floating-action {
      position: fixed;
      bottom: 1.25rem; /* 20px -> 1.25rem */
      right: 1.25rem; /* 20px -> 1.25rem */
      width: 3.5rem; /* 56px -> 3.5rem */
      height: 3.5rem; /* 56px -> 3.5rem */
      background: linear-gradient(135deg, #ff6b35, #f7931e);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0.25rem 0.9375rem rgba(255, 107, 53, 0.4);
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 1.5rem; /* 24px -> 1.5rem */
      color: white;
    }

    .floating-action:hover {
      transform: scale(1.1);
      box-shadow: 0 0.375rem 1.25rem rgba(255, 107, 53, 0.6);
    }

    /* 响应式设计 */
    @media screen and (max-width: 480px) {
      html {
        font-size: max(14px, 3.5vw);
      }

      body {
        padding: 1rem;
      }

      .container {
        padding: 1rem;
        border-radius: 0.5rem;
      }

      .floating-action {
        bottom: 1rem;
        right: 1rem;
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
      }
    }

    @media screen and (min-width: 768px) {
      html {
        font-size: max(18px, min(2.5vw, 20px));
      }
    }
  </style>
</head>
<body>
<div class="container">
  <h1>🎯 活动详情</h1>

  <div class="page-info">
    <h3>页面信息</h3>
    <p>这是H5页面B，演示H5页面间的跳转</p>
    <p>页面类型：<strong>H5页面B</strong></p>
    <p>协议URL：<strong>h5://activity/detail</strong></p>
  </div>

  <div class="params-info">
    <strong>📥 页面参数：</strong><br/>
    <span id="params">等待加载...</span>
  </div>

  <div class="activity-content">
    <div class="activity-title">🎉 双十一特惠活动</div>
    <div class="activity-desc">
      HMRouter WebView集成案例<br/>
      学习鸿蒙开发最佳实践
    </div>
    <div class="activity-price">
      ￥199 <span style="font-size: 16px; text-decoration: line-through; color: #636e72">￥399</span>
    </div>
    <div>
      <span class="activity-tag">限时特惠</span>
      <span class="activity-tag">新人专享</span>
      <span class="activity-tag">包邮</span>
    </div>
  </div>

  <div class="stats">
    <div class="stat-item">
      <div class="stat-number">2.5k</div>
      <div class="stat-label">已售</div>
    </div>
    <div class="stat-item">
      <div class="stat-number">4.8</div>
      <div class="stat-label">评分</div>
    </div>
    <div class="stat-item">
      <div class="stat-number">95%</div>
      <div class="stat-label">好评</div>
    </div>
  </div>

  <div class="button-group">
    <button class="button success" onclick="goToNativePageA()">🏠 跳转到ArkUI页面A</button>

    <button class="button" onclick="goBackToCart()">🛒 返回购物车 (H5页面A)</button>

    <button class="button outline" onclick="goBack()">← 返回上一页</button>
  </div>

  <div class="log" id="log">
    <div class="log-entry">
      <span class="log-time">[系统]</span>
      <span class="log-message">📱 活动详情页面初始化</span>
    </div>
  </div>
</div>

<div class="floating-action" onclick="showRouterInfo()" title="显示路由信息">ℹ️</div>

<script>
  let logContainer = document.getElementById('log');

  // 日志记录函数
  function addLog(message, type = 'info') {
    const time = new Date().toLocaleTimeString();
    const logElement = document.createElement('div');
    logElement.className = 'log-entry';

    let icon = '📝';
    switch (type) {
      case 'success':
        icon = '✅';
        break;
      case 'error':
        icon = '❌';
        break;
      case 'warning':
        icon = '⚠️';
        break;
      case 'route':
        icon = '🧭';
        break;
    }

    logElement.innerHTML = `
              <span class='log-time'>[${time}]</span>
              <span class='log-message'>${icon} ${message}</span>
          `;
    logContainer.appendChild(logElement);
    logContainer.scrollTop = logContainer.scrollHeight;
  }

  // 等待HMRouter Bridge准备就绪
  window.onHMRouterReady = function (params) {
    document.getElementById('params').textContent = JSON.stringify(params, null, 2);
    addLog('HMRouter Bridge 已准备就绪', 'success');
    addLog(`接收到页面参数: ${JSON.stringify(params)}`, 'info');

    // 如果是从购物车页面跳转过来的，显示特殊信息
    if (params.from === 'cart') {
      addLog('检测到从购物车页面跳转过来', 'route');
      if (params.recommendedItems) {
        addLog(`推荐商品: ${params.recommendedItems.join(', ')}`, 'info');
      }
    }

    console.log('🎉 H5页面B已加载，参数：', params);
  };

  // 监听Bridge对象准备就绪事件（立即通知）
  window.addEventListener('hmrouterbridgeready', function (event) {
    addLog('🚀 Bridge对象已创建，可以使用！', 'success');
    console.log('🚀 Bridge立即准备就绪事件:', event.detail);
  });

  // 跳转到ArkUI页面A
  function goToNativePageA() {
    if (window.HMRouterBridge) {
      const params = {
        from: 'h5_activity',
        activityId: 'double11_2024',
        selectedProduct: 'hmrouter_course',
        timestamp: Date.now(),
      };
      addLog(`准备跳转到ArkUI页面A，参数: ${JSON.stringify(params)}`, 'route');
      window.HMRouterBridge.push('NativePageA', params);
    } else {
      addLog('HMRouter Bridge 未准备就绪', 'error');
      alert('HMRouter Bridge 未准备就绪，请稍后再试');
    }
  }

  // 返回到购物车页面
  function goBackToCart() {
    if (window.HMRouterBridge) {
      const params = {
        from: 'activity_detail',
        selectedActivity: 'double11_2024',
        addToCart: true,
      };
      addLog(`准备返回购物车页面，参数: ${JSON.stringify(params)}`, 'route');
      window.HMRouterBridge.push('h5://shopping/cart', params);
    } else {
      addLog('HMRouter Bridge 未准备就绪', 'error');
      alert('HMRouter Bridge 未准备就绪，请稍后再试');
    }
  }

  // 返回上一页
  function goBack() {
    if (window.HMRouterBridge) {
      addLog('准备返回上一页', 'route');
      window.HMRouterBridge.pop();
    } else {
      addLog('HMRouter Bridge 未准备就绪', 'error');
      alert('HMRouter Bridge 未准备就绪，请稍后再试');
    }
  }

  // 显示路由信息
  function showRouterInfo() {
    if (window.HMRouterBridge) {
      const params = window.HMRouterBridge.getParams();
      addLog('当前路由信息查询', 'route');
      addLog(`参数详情: ${JSON.stringify(params, null, 2)}`, 'info');

      // 弹窗显示详细信息
      const info = `
                  当前页面：H5活动详情页
                  协议URL：h5://activity/detail
                  容器类型：WebView容器
                  参数数量：${Object.keys(params).length}

                  参数详情：
                  ${JSON.stringify(params, null, 2)}
              `;
      alert(info);
    } else {
      addLog('HMRouter Bridge 未准备就绪', 'error');
    }
  }

  // 模拟用户行为
  function simulateUserInteraction() {
    addLog('模拟用户浏览行为', 'info');

    setTimeout(() => {
      addLog('用户查看了商品详情', 'info');
    }, 2000);

    setTimeout(() => {
      addLog('用户滚动到了页面底部', 'info');
    }, 4000);
  }

  // 页面生命周期事件
  document.addEventListener('DOMContentLoaded', function () {
    addLog('DOM内容加载完成', 'success');
    simulateUserInteraction();
  });

  window.addEventListener('load', function () {
    addLog('页面完全加载完成', 'success');
  });

  // 页面可见性改变
  document.addEventListener('visibilitychange', function () {
    if (document.visibilityState === 'visible') {
      addLog('页面变为可见状态', 'info');
    } else {
      addLog('页面变为隐藏状态', 'warning');
    }
  });

  // 监听页面滚动
  let scrollTimer = null;
  window.addEventListener('scroll', function () {
    if (scrollTimer) { clearTimeout(scrollTimer) }
    scrollTimer = setTimeout(() => {
      const scrollPercent = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);
      if (scrollPercent > 50) {
        addLog(`用户已浏览${scrollPercent}%的内容`, 'info');
      }
    }, 500);
  });

  // 错误处理
  window.addEventListener('error', function (e) {
    addLog(`JavaScript错误: ${e.message}`, 'error');
    console.error('JavaScript错误:', e);
  });

  // 页面初始化
  addLog('🚀 活动详情页面开始初始化', 'success');
  addLog('等待HMRouter Bridge连接...', 'info');

  // 检查Bridge状态（改进的重试机制）
  let bridgeCheckCount = 0;
  const maxBridgeChecks = 16; // 最多检查16次（8秒）

  function checkBridgeStatus() {
    bridgeCheckCount++;

    if (window.HMRouterBridge) {
      addLog('✅ Bridge连接成功！', 'success');
      return;
    }

    if (bridgeCheckCount < maxBridgeChecks) {
      addLog(`🔍 Bridge连接检查 (${bridgeCheckCount}/${maxBridgeChecks})`, 'info');
      setTimeout(checkBridgeStatus, 500);
    } else {
      addLog('⚠️ Bridge连接超时，请检查容器状态', 'warning');
      addLog('💡 提示：您仍可以尝试点击按钮，Bridge可能在稍后准备就绪', 'info');
    }
  }

  // 500ms后开始检查
  setTimeout(checkBridgeStatus, 500);
</script>
</body>
</html>
